<template>
  <div class="chartgroup">
    <div class="wrapdata">
      <!--    媒体的元数据展示： -->
      <div class="titlecont">
        <el-tag type="success">媒体元数据展示</el-tag>
        <div class="txt">
          <div>媒体来源:xxx</div>
          <div>入库时间:xxx</div>
          <div>时长：00:53:25</div>
          <div>文件大小：305M</div>
          <div>分辨率：1920*1080</div>
        </div>
      </div>
      <!-- 风控总览 -->
      <div class="overview">
        <el-tag type="success">风控总览</el-tag>
        <div class="chart">111</div>
      </div>
    </div>
   
    <div class="analy">
      <!-- 负向内容探针 -->
      <div class="linecont">
        <el-tag type="success">负向内容探针</el-tag>
        <div id="mainline"></div>
      </div>
      <!-- 高频词 -->
      <div class="highword">
        <el-tag type="success">高频词</el-tag>
        
        <div id="chart-container"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    // 折线
    drawLine() {
      // 初始化折线图
      this.charts = echarts.init(document.getElementById("mainline"));

      // 设置折线图数据和样式
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "最近一周订单数量", // 自定义
        },

        tooltip: {
          trigger: "axis",
        },

        legend: {
          align: "right",
          left: "3%",
          top: "15%",
          data: ["近一周"], // 自定义
        },

        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        // 自定义：设置x轴刻度
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
          // 自定义标签
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },

        // 自定义：设置y轴刻度
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4,
          interval: 250,
        },

        // 设置数据
        series: [
          {
            name: "近一周", // 自定义
            type: "line",
            stack: "总量", // 自定义
            data: this.opinionData, // 自定义
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)",
              lineStyle: {
                color: "rgb(255,96,64)",
              },
            },
          },
        ],
      });
    },
    // 高频词
    initWord() {
      // 创建一个容器
      const container = document.getElementById("chart-container"); // 创建一个图表实例
      const chart = echarts.init(container);

      let option = {
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 90,
              edgeLength: 20,
            },
            symbolSize: 50,
            label: {
              show: true,
              fontWeight: "bold",
              color: "#fff",
            },
            data: [
              {
                name: "华中",
                symbolSize: 90,
                itemStyle: {
                  color: "#4169E1",
                },
              },
              {
                name: "华南",
                symbolSize: 60,
                itemStyle: {
                  color: "#FFD700",
                },
              },
              {
                name: "东北",
                symbolSize: 55,
                itemStyle: {
                  color: "#30ECA6",
                },
              },
              {
                name: "西北",
                itemStyle: {
                  color: "#E6E6FA",
                },
              },
              {
                name: "西南",
                itemStyle: {
                  color: "#87CEFA",
                },
              },
              {
                name: "华北",
                symbolSize: 70,
                itemStyle: {
                  color: "#00BFBB",
                },
              },
              {
                name: "华西",
                itemStyle: {
                  color: "#87CE22",
                },
              },
              {
                name: "东南",
                symbolSize: 70,
                itemStyle: {
                  color: "#00BFFF",
                },
              },
              {
                name: "华东",
                symbolSize: 70,
                itemStyle: {
                  color: "#7B68EE",
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option)
    },
  },
  mounted() {
    this.drawLine();
    this.initWord();
  },
};
</script>
<style lang="less" scoped>
.chartgroup {
  width: 100%;
  height: 100%;
  background: rgb(92, 45, 153);
  .wrapdata {
    width: 100%;
    height: 30%;
    display: flex;
    .titlecont {
      width: 50%;
      height: 100%;
      background: #a6b55c;
      .txt {
        width: 100%;
        height: 30%;
      }
    }
    .overview {
      width: 50%;
      height: 100%;
      background: #24b139;
      .chart {
        width: 100%;
        height: 30%;
      }
    }
  }
  
  .analy {
    width: 100%;
    height: 70%;
    display: flex;
    .linecont {
      width: 50%;
      height: 100%;
      background: #d7bc63;
      #mainline {
        width: 100% !important;
        height: 100% !important;
        background: #24b139;
      }
    }
    .highword {
      width: 50%;
      height: 100%;
      background: #462c9c;
      #chart-container {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>